<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LOGIN</title>
    <!-- 引入字体图标库 -->
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/c/font_4179360_0trgibeq4zp.css"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Times New Roman", Times, serif;
      }

      section {
        position: relative;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-x: hidden;
        /* 重叠样式，内容居中 */
      }

      section .bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* 设置图片铺满屏幕 */
      }

      /* 登录表单开始 */
      .login {
        position: relative;
        width: 500px;
        min-height: 300px;
        padding: 60px;
        border-radius: 20px;
        background: rgb(255, 255, 255, 0.25);
        backdrop-filter: blur(3px);
        display: flex;
        flex-direction: column;
        gap: 20px;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
        /* 登录容器基本架子 */
      }

      .login h2 {
        position: relative;
        width: 100%;
        text-align: center;
        font-size: 2.5em;
        font-weight: 600;
        color: #8f2c24;
        margin-bottom: 10px;
        /* 设置大标题Sign in样式 */
      }

      .login .inputBox {
        position: relative;
      }

      .login .inputBox input {
        position: relative;
        width: 100%;
        padding: 15px 20px;
        outline: none;
        font-size: 1.25em;
        color: #8f2c24;
        border-radius: 5px;
        background: #fff;
        border: none;
        margin-bottom: 30px;
      }

      .login .inputBox ::placeholder {
        color: #8f2c24;
      }

      .login .inputBox #btn {
        position: relative;
        border: none;
        outline: none;
        background: #8f2c24;
        color: #fff;
        cursor: pointer;
        font-size: 1.25em;
        font-weight: 500;
      }
      /* 提示词和按钮样式 */

      .login .group {
        display: flex;
        justify-content: space-between;
      }

      .login .group a {
        font-size: 1.25em;
        color: #8f2c24;
        font-weight: 500;
        text-decoration: none;
        /* 底部-忘记密码样式 */
      }
      /* 登录表单结束 */

      /* 飘落的花朵开始 */
      .flower {
        position: absolute;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        z-index: 1;
        pointer-events: none;
      }

      .flower img {
        position: absolute;
      }
      /* 大容器铺满屏幕，小花朵定位 */
      @keyframes animate {
        0% {
          opacity: 0;
          top: -10px;
          transform: translate(-200px) rotateX(0deg);
        }
        10% {
          opacity: 1;
        }
        20% {
          transform: translate(-20px) rotate(45deg);
        }
        40% {
          transform: translate(-40px) rotate(90deg);
        }
        60% {
          transform: translate(-60px) rotate(180deg);
        }
        80% {
          transform: translate(-80px) rotate(45deg);
        }
        100% {
          top: 110%;
          transform: translate(-100px) rotate(225deg);
        }
      }

      .flower img:nth-child(1) {
        left: 20%;
        animation: animate 20s linear infinite;
      }

      .flower img:nth-child(2) {
        left: 50%;
        animation: animate 14s -2s linear infinite;
      }
      .flower img:nth-child(3) {
        left: 70%;
        animation: animate 12s -3s linear infinite;
      }
      .flower img:nth-child(4) {
        left: 5%;
        animation: animate 15s -2s linear infinite;
      }

      .flower img:nth-child(5) {
        left: 85%;
        animation: animate 18s -1s linear infinite;
      }
      .flower img:nth-child(6) {
        left: 90%;
        animation: animate 12s -1s linear infinite;
      }
      .flower img:nth-child(7) {
        left: 15%;
        animation: animate 14s -2s linear infinite;
      }

      .flower img:nth-child(8) {
        left: 60%;
        animation: animate 15s -1s linear infinite;
      }
      /* 设置每朵花不同位置、不同动画时间 类似  “摇晃的桃子” */
      /* 飘落的花朵结束 */

      /* 添加眼睛图标，查看密码 */
      .login .inputBox i {
        position: absolute;
        right: 15px;
        top: 15px;
        font-size: 28px;
        color: #8f2c24;
        cursor: pointer;
      }

      .login .inputBox .icon-see {
        display: block;
      }

      .login .inputBox .icon-nosee {
        display: none;
        /* 定位，默认-眼睛睁开 */
      }

      .login .inputBox.see .icon-see {
        display: none;
      }

      .login .inputBox.see .icon-nosee {
        display: block;
        /* 控制图标切换 */
      }
    </style>
  </head>
  <body>
    <section>
      <img src="bj.png" class="bg" alt="" />
      <div class="login">
        <h2>Sign In</h2>
        <div class="inputBox">
          <input type="text" placeholder="Username" />
        </div>
        <!-- 眼睛图标 -->
        <div class="inputBox" id="pass">
          <input type="password" placeholder="Password" />
          <i class="iconfont icon-see"></i>
          <i class="iconfont icon-nosee"></i>
        </div>

        <div class="inputBox">
          <input type="submit" value="Login" id="btn" />
        </div>
        <div class="group">
          <a href="#"> Forget Password </a>
          <a href="#"> Sign up </a>
        </div>
      <!--</div>
       <div class="flower">
        <img src="f1.png" />
        <img src="f1.png" />
        <img src="f1.png" />
        <img src="f1.png" />
        <img src="f1.png" />
        <img src="f1.png" />
        <img src="f1.png" />
        <img src="f1.png" />
      </div> -->
    </section>

    <script>
      const pass = document.querySelector("#pass");
      const see = document.querySelector(".icon-see");
      const noSee = document.querySelector(".icon-nosee");
      const inp = document.querySelector("#pass input");

      see.addEventListener("click", function () {
        pass.classList.add("see");
        inp.type = "text";
      });

      // 控制输入框type
      noSee.addEventListener("click", function () {
        pass.classList.remove("see");
        inp.type = "password";
      });
    </script>
  </body>
</html>
